<!DOCTYPE html>
<html>
<head>
	<title>规格编辑</title>
	<include file='public/head'>
	<style>
		.layui-legend-size{font-size:14px !important;}
		.layui-nopadding{padding:0 !important;}
		.layui-overflow{overflow:auto;}
		.layui-nomargin{margin: 0 !important;}
		.layui-bottom{border-bottom:1px solid rgb(226, 226, 226);}
		.layui-input{height:30px !important; }
		.layui-form-search-item .layui-inline{margin-bottom: 5px;} 
		.layui-form-search-item label{margin-left: 15px;}
		.layui-table-page {padding: 7px 0px 0px;}
		.layui-field-padding{border-width: 1px;padding:0 0 5px 10px;}
	</style>
</head>
<body>
<form id="f" class="layui-form">
	<input type="hidden" name="spec_id" value="{$info['spec_id']}">
	<table class="layui-table layui-nomargin">
		<tr>
			<td width="20%"><b>模板名</b></td>
			<td>
				<input type="text" class="layui-input" name="module_name" value="{$info.module_name}" placeholder="请输入模板名">
			</td>
		</tr>
		<tr>
			<td><b>所属分类</b></td>
			<td>
		        <select name="cid" lay-filter="list" lay-verify="required" lay-search="">
		          <option value="0"></option>
		          {$select}
		        </select>				
			</td>
		</tr>		
		<tr>
			<td colspan="2">
				<a href="javascript:;" class="layui-btn layui-btn-xs add-spec" data-id=""><i class="layui-icon">&#xe654;</i>添加规格</a>
			</td>
		</tr>			
	</table>
	<br>
	<div id="addspec">
		<volist name="info['name']" id="vo">
			<table class="layui-table layui-nomargin">
				<thead>
					<tr>
						<td colspan="2">
							<div>
								<div class="layui-input-inline" style="width: 80%">
									<input type="text" class="layui-input" autocomplete="off" value="{$vo.spec_name}" placeholder="请输入规格名" name="spec[update][{$vo.name_id}]">
								</div>
								<a href="javascript:;" class="layui-btn layui-btn-xs add-btn" data-id="{$vo.name_id}"><i class="layui-icon">&#xe654;</i>添加属性</a>
								<a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-danger delete-btn"   data-id="{$vo.name_id}"><i class="layui-icon">&#xe640;</i>删除规格</a>
							</div>
						</td>
					</tr>
				</thead>
				<tbody>
					<volist name="vo['attr']" id="v">
						<tr>
							<td>
								<div>
									<div class="layui-input-inline" style="width: 80%">
										<input type="text" name="attr[update][{$vo.name_id}][{$v.attr_id}]" value="{$v.attr_name}" autocomplete="off" class="layui-input">
									</div>	
									<a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-danger delete-attr-old"   data-id="{$v.attr_id}"><i class="layui-icon">&#xe640;</i>删除属性</a>
								</div>
							</td>
						</tr>
					</volist>
				</tbody>
			</table>
		</volist>
	</div>
</form>
<include file='public/scripts'>

<script type="text/javascript">
var tijiao = function(){
	//提交
	$.ajax({
		url:"{:cmf_plugin_url('Goods://goods_spec/editspec')}",
		data: $('#f').serialize(),
		type:'post',
		success:function(data){
			if (data.code == 1) {
				layer.msg(data.msg,{icon:1,time:1500},function(){
					parent.layer.closeAll();
					parent.location.reload(); 
				});
			} else {
				layer.msg(data.msg,{icon:2,time:1500});
			}
		},
		error:function()
		{
			layer.msg('系统错误',{icon:2,time:1500});
		}
	})
}
</script>


<script type="text/javascript">
	var form = layui.form;
    //选择触发
	form.on('select(list)', function(data){
        let selectText=data.elem[data.elem.selectedIndex].text;//得到被选中的文本值
        // 去空格
        selectText=selectText.replace(/\s+/g, "");
        data.elem[data.elem.selectedIndex].text=selectText;//覆盖原文本值
    });	

	var num = 0;
	//添加一个规则
	$('.add-spec').on('click',function(){
		$('#addspec').append("<table class='layui-table layui-nomargin'><thead><tr><td colspan='2'><div><div class='layui-input-inline' style='width:80%'><input type='text' autocomplete='off' class='layui-input' name='spec[add]["+num+"]' placeholder='请输入规格名'></div><a href='javascript:;' class='layui-btn layui-btn-xs add-attr' data-id='"+num+"'><i class='layui-icon'>&#xe654;</i>添加属性</a><a href='javascript:;' class='layui-btn layui-btn-xs layui-btn-danger delete-spec'  data-id=''><i class='layui-icon'>&#xe640;</i>删除规格</a></div></td></tr></thead><tbody></tbody></table>");
		num++;
	});
	//新增规格中添加一个属性
	$(document).on("click", ".add-attr", function (e) {
		let id = $(this).data('id');
	    $(this).parent().parent().parent().parent().parent().find("tbody").append("<tr><td><div><div class='layui-input-inline' style='width:80%'><input type='text' name='attr[add]["+id+"][]' autocomplete='' class='layui-input' placeholder='请输入属性名'></div><a href='javascript:;' class='layui-btn layui-btn-xs layui-btn-danger delete-attr' data-id=''><i class='layui-icon'>&#xe640;</i>删除属性</a></div></td></tr>");
	});	
	//原有规格中添加一个属性
	$('.add-btn').on('click',function(){
		//规格id
		let id = $(this).data('id');
		let m = $(this);
		let data = {};
		data['id'] = id;
		//提交
		$.ajax({
			url:"{:cmf_plugin_url('Goods://goods_spec/addattr')}",
			data: data,
			type:'post',
			success:function(returnid){
				// info = returnid;
			    m.parent().parent().parent().parent().parent().find("tbody").append("<tr><td><div><div class='layui-input-inline' style='width:80%'><input type='text' name='attr[update]["+id+"]["+returnid+"]' autocomplete='' class='layui-input' placeholder='请输入属性名'></div><a href='javascript:;' class='layui-btn layui-btn-xs layui-btn-danger delete-attr-old'   data-id='"+returnid+"'><i class='layui-icon'>&#xe640;</i>删除属性</a></div></td></tr>");
			},
			error:function()
			{
				layer.msg('系统错误',{icon:2,time:1500});
			}
		})	
	})
	//删除原有规格名
	$('.delete-btn').on('click',function(){
		let id = $(this).data('id');
		let data = {};
		data['id'] = id;
		let m = $(this);
        //询问
        layer.confirm('这是一个已保存的规格，是否删除？',{icon:3,title:'提示',btn:['删除','取消']}
        ,function(index,layero){
            $.ajax({
	            url:"{:cmf_plugin_url('Goods://goods_spec/deletename')}",
	            type:'post',
	            data:data,
				success:function(data){
	 				m.parent().parent().parent().parent().parent().remove();
	 				layer.closeAll();
				},
				error:function()
				{
					layer.msg('系统错误',{icon:2,time:1500});
				}
	        })
        },function(index){});
	});
	//删除原有模板中生成的规格名
	$(document).on("click", ".delete-attr-old", function (e) {
		let id = $(this).data('id');
		let data = {};
		data['id'] = id;
		let m = $(this);
        //询问
        layer.confirm('这是一个已保存的属性，是否删除？',{icon:3,title:'提示',btn:['删除','取消']}
        ,function(index,layero){
            $.ajax({
	            url:"{:cmf_plugin_url('Goods://goods_spec/deleteattr')}",
	            type:'post',
	            data:data,
				success:function(data){
	 				m.parent().parent().parent().remove();
	 				layer.closeAll();
				},
				error:function()
				{
					layer.msg('系统错误',{icon:2,time:1500});
				}
	        })
        },function(index){});	
	});	
	//删除原有属性
	$('.delete-attr-old').on('click',function(){
		let id = $(this).data('id');
		let data = {};
		data['id'] = id;
		let m = $(this);
        //询问
        layer.confirm('这是一个已保存的属性，是否删除？',{icon:3,title:'提示',btn:['删除','取消']}
        ,function(index,layero){
            $.ajax({
	            url:"{:cmf_plugin_url('Goods://goods_spec/deleteattr')}",
	            type:'post',
	            data:data,
				success:function(data){
	 				m.parent().parent().parent().remove();
	 				layer.closeAll();
				},
				error:function()
				{
					layer.msg('系统错误',{icon:2,time:1500});
				}
	        })
        },function(index){});		
	});
	//删除属性
	$(document).on("click", ".delete-attr", function (e) {
		$(this).parent().remove();
	});
	//删除规则
	$(document).on("click", ".delete-spec", function (e) {
		$(this).parent().parent().parent().remove();
	});	
</script>		
</body>
</html>